<template>
    <div class="addBox">
        <span class="pageName">设置 / 机构管理 / 编辑机构</span>
        <div class="addForm">
            <el-form ref="editFormRef" :model="editForm" :rules="rules" label-width="120px" class="demo-ruleForm"
                :size="formSize">
                <el-form-item label="机构名称" prop="orgName">
                    <el-input v-model="editForm.orgName" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="地址" prop="orgAddress">
                    <el-input v-model="editForm.orgAddress" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="管理员姓名" prop="adminName">
                    <el-input v-model="editForm.adminName" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="联系方式" prop="adminPhone">
                    <el-input v-model="editForm.adminPhone" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="账号" prop="adminAccount">
                    <el-input v-model="editForm.adminAccount" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="密码" prop="adminPassword" class="resetPwdItem">
                    <el-input v-model="editForm.adminPassword" type="password" placeholder="请输入" />
                    <el-button class="resetPwd" @click="resetVisible = true">重置密码</el-button>
                </el-form-item>
                <el-form-item class="formBtn">
                    <el-button @click="cancelAdd" :plain="true">取消</el-button>
                    <el-button type="primary" @click="submitForm(editFormRef)" :plain="true">确定</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 重置密码弹出框 -->
        <el-dialog v-model="resetVisible" title="重置密码确认" width="30%">
            <span class="prompt"><span class="promptName">是否确认重置该机构管理员密码</span>
                <p class="promptContent">重置后该机构管理员密码将恢复为默认密码 :<span>123456</span></p>
            </span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelReset" :plain="true">取消</el-button>
                    <el-button type="primary" @click="confirmReset" :plain="true">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import axios from '@/util/http'
import { useStore } from 'vuex'
export default defineComponent({
    name: 'AddInstitutional',
    setup() {
        const state = reactive({
            formSize: ref('default'),
            // 表单数据
            editForm: reactive({
                'orgId': '',
                'orgName': '',
                'orgAddress': '',
                'adminName': '',
                'adminPhone': '',
                'adminAccount': '',
                'adminPassword': '',
            }),
            resetVisible: ref(false)
        })

        const router = useRouter();
        const route = useRoute()
        const store = useStore()

        const editFormRef = ref<FormInstance>()
        const rules = reactive<FormRules>({
            orgName: [
                { required: true, message: '请输入机构名称', trigger: ['change', 'blur'] },
            ],
            adminName: [
                { required: true, message: '请输入管理员姓名', trigger: ['change', 'blur'] },
                { min: 2, max: 15, message: '长度应在2-15个字符', trigger: ['change', 'blur'] },
            ],
            adminPhone: [
                { required: true, message: '请输入联系方式', trigger: ['change', 'blur'] },
                { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '请输入正确的联系方式', trigger: ['change', 'blur'] },
            ],
            adminAccount: [
                { required: true, message: '请输入账号', trigger: ['change', 'blur'] },
                { min: 3, message: '最少3个字符', trigger: ['change', 'blur'] },
                { pattern: /^[a-zA-Z]+$/, message: '账号只能含有英文字母', trigger: ['change', 'blur'] },
            ],
            adminPassword: [
                { required: true, message: '请输入密码', trigger: ['change', 'blur'] },
                { min: 3, message: '最少3个字符', trigger: ['change', 'blur'] },
            ],

        })

        const cancelAdd = () => {
            console.log('取消');
            router.push('/Institutional');
            ElMessage('已取消编辑！')

        }
        const submitForm = async (formEl: FormInstance | undefined) => {
            if (!formEl) return
            await formEl.validate((valid, fields) => {
                if (valid) {
                    axios({
                        method: 'post',
                        url: '/city_sys_organization/updateorganization',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        data: state.editForm
                    })
                        .then(res => {
                            if (res.data.msg == '修改成功') {
                                ElMessage({
                                    message: '编辑成功！',
                                    type: 'success',
                                })
                                router.push('/Institutional')
                            } else if (res.data.msg == "添加失败，要添加是账号已存在！") {
                                ElMessage.error('该账号已存在，请重新输入！')
                            }
                        })

                } else {
                    console.log('编辑失败!', fields);
                }
            })
        }

        // 重置密码
        const confirmReset = () => {
            axios({
                method: 'post',
                url: 'city_sys_organization/resetpassword',
                params: {
                    orgId: state.editForm.orgId
                }
            })
                .then(res => {
                    console.log(res.data);

                    state.resetVisible = false;
                })

            ElMessage({
                message: '重置密码成功！',
                type: 'success',
            })

        }
        // 取消重置
        const cancelReset = () => {
            state.resetVisible = false;
            ElMessage('已取消重置密码！')
        }

        // 获取数据
        onBeforeMount(async() => {
            let orgId = ref()
            orgId.value = route.query.orgId

            await axios({
                method: 'post',
                url: 'city_sys_organization/findorganizationbyid',
                params: {
                    id: orgId.value
                }
            })
                .then(res => {
                    for (let key1 in state.editForm) {
                        for (let key2 in res.data.data) {
                            if (key1 == key2) {
                                state.editForm[key1] = res.data.data[key2]
                            }
                        }
                    }


                })
        })

        return {
            ...toRefs(state),
            editFormRef,
            rules,
            // 按钮
            cancelAdd,
            submitForm,
            // 重置密码
            confirmReset,
            cancelReset

        }
    }
})
</script>

<style scoped lang="less">
.addBox {
    width: 100%;
    display: flex;
    flex-direction: column;

    // 页面名称
    .pageName {
        font-size: 13px;
        color: #333333;
        font-weight: 400;
    }

    // 新增表单
    .addForm {
        width: 80%;
        display: flex;
        background: white;
        margin-top: 20px;
        padding: 30px;
        border-radius: 4px;

        .el-input {
            width: 410px;
            height: 40px;
            font-size: 13px;
        }

        // 重置密码
        .resetPwd {
            margin-left: 20px;
            background: none;
            border: none;
            color: #4200ff;
            font-size: 13px;

            &:hover {
                text-decoration: underline;
            }

        }

        /deep/ .formBtn {
            width: 83%;
            margin-top: 80px;

            .el-form-item__content {
                display: flex;
                justify-content: flex-end;

                // 按钮
                .el-button {
                    width: 95px;
                    height: 40px;
                    font-size: 13px;
                }
            }
        }
    }

    // 重置密码弹出框
    .prompt {
        height: 80px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .promptName {
            font-size: 14px;
            font-weight: 650;
        }

        .promptContent {
            height: 50px;
            font-size: 14px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
    }

}

.el-form-item {
    display: flex;
    align-items: center
}

/deep/ .el-form-item__label {
    font-size: 13px;
}
</style>